import { useEffect, useState, useCallback } from 'react';
import { record } from 'rrweb';
import { useTracking } from './api';

/**
 * 在组件的整个生命周期内进行页面的跟踪
 *
 * @param {object} data 要发送至后端的过程数据，例如表单的填写情况等
 */
export const useTrack = (session, autoRecoding = true, interval = 2000) => {
  const [recording, setRecording] = useState(autoRecoding);
  const [events] = useState([]);
  const [, , submit] = useTracking(session);

  const submitEvents = useCallback(
    async (data, done) => {
      await submit({ data, events }, done);
      // XXX: 在这里不能调用 setEvents([]) 清空
      // events 在 useEffect 中作为录制的依赖, 重置 events 会导致重新发起录制
      // 将数组长度设置为0可以保证引用不变
      events.length = 0;
    },
    [events, submit]
  );

  useEffect(() => {
    if (recording) {
      return record({
        emit(event) {
          events.push(event);
        }
      });
    }
  }, [events, recording]);

  // 定时发送的事件间隔
  // useInterval(() => {
  //   if (size(events) > 2) {
  //     submitEvents({}, false);
  //   }
  // }, interval);

  // 页面关闭的时候最后发送一次
  // useEffect(() => submitEvents, [submitEvents]);

  return [recording, setRecording, submitEvents];
};
